<template>
  <div class="app-container">
    <!-- 顶部选择年份和操作按钮 -->
    <el-row>
      <el-col :span="24">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="站点：">
            <el-select v-model="formInline.id" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.segmentname"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="选择年份：">
            <el-date-picker
              v-model="formInline.year"
              type="year"
              placeholder="选择年份"
              value-format="yyyy"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleExport">导出</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>

    <!-- 表格展示监测数据 -->
    <!-- 表格展示监测数据 -->
    <el-table
      id="selectTable"
      :data="tableData"
      style="width: 100%"
      border
      :span-method="objectSpanMethod"
      :header-cell-style="{ background: '#f5f7fa', color: '#303133' }"
      :cell-style="{ padding: '10px 0' }"
    >
      <el-table-column
        v-for="column in tableOp"
        :key="column.prop"
        :prop="column.prop"
        :label="column.label"
        align="center"
      >
        <template slot-scope="scope">
          <!-- 高亮显示异常值 -->
          <span
            v-if="scope.row[column.prop + '_v'] == '1'"
            style="color: red"
            >{{ scope.row[column.prop] }}</span
          >
          <span v-else>{{ scope.row[column.prop] }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import tableToExcel from "@/utils/tableToExcel";
import { getDmList } from "@/api/dataResources/monitorData/section.js";
import { getAutoStationYearReport } from "@/api/riverGeneralMange/riverGeneralMange.js";
export default {
  computed: {},

  data() {
    return {
      formInline: {
        id: "",
        year: new Date().getFullYear().toString(),
      },
      options: [],
      tableOp: [],
      tableData: [],
    };
  },
  created() {
    this.getGm();
  },
  methods: {
    //获取站点的列表
    getGm() {
      let query = {
        pageNum: 1,
        pageSize: 1000,
        isauto: "1",
        isdrink: "0",
      };
      getDmList(query).then((res) => {
        console.log(">>>ssss", res);
        this.formInline.id = res.rows[0].id;
        this.options = res.rows;
        // 获取表格数据
        this.getList();
      });
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (rowIndex >= this.tableData.length - 2) {
        if (columnIndex == 1) {
          return [1, this.tableOp.length - 1];
        }
        if (columnIndex > 1) {
          return [0, 0];
        }
      }
    },
    onSubmit() {
      this.getList();
    },
    /** 导出按钮操作 */
    handleExport() {
      tableToExcel.getExcel("#selectTable", "监测数据年度报表");
    },

    //获取表格数据
    getList() {
      // 获取表格数据
      getAutoStationYearReport(this.formInline).then((response) => {
        if (response.code == 200) {
          this.tableOp = response.data.tableOp;
          this.tableData = response.data.tableData;
        }
      });
    },
  },
};
</script>

<style scoped>
/* 添加一些样式来美化页面 */
</style>
